<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 32 32"
    preserveAspectRatio="xMidYMid meet"
    fill="none"
    role="presentation"
    ref="host"
  >
    <g><path data-follow-fill="#0389FF" d="M27.74 17.728c-2.28 1.893-5.273 3.593-8.786 4.873-3.4 1.24-6.68 1.86-9.58 1.914-.06 0-.087.08-.04.12a11.312 11.312 0 0 0 7.333 2.7c5.647 0 10.32-4.14 11.18-9.547.007-.06-.06-.1-.106-.06Zm-21.306.573c2 .427 5.62.42 10.467-1.34 5.02-1.826 7.82-4.253 9.013-5.866.347-.467.36-1.107.027-1.58-2.047-2.927-5.434-4.847-9.274-4.847-6.26 0-11.333 5.073-11.333 11.333 0 .38.02.76.06 1.127a1.334 1.334 0 0 0 1.04 1.173Z" :fill="_fill"/><path data-follow-fill="#0389FF" d="M30.368 8.154c-.7-1.933-2.814-3.113-5.727-3.507-.3-.04-.453.354-.207.527a13.082 13.082 0 0 1 2.06 1.833c.12.134.274.24.434.32.793.387 1.34.9 1.56 1.507.92 2.52-3.334 7.247-10.907 10s-13.867 1.867-14.78-.653c-.253-.707-.107-1.58.407-2.54.1-.18.16-.38.173-.587.06-.887.213-1.747.44-2.58.08-.293-.28-.507-.493-.287-2.18 2.26-3.14 4.654-2.407 6.674 1.473 4.04 9.087 4.853 17.347 1.846 8.253-2.993 13.573-8.513 12.1-12.553Z" :fill="_fill"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class Security2 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
